<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
      <el-breadcrumb-item v-for="item in menuBreadList" :key="item.id">
        {{item.name}}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <span v-show="false">{{menuBreadMap}}</span>
  </div>
</template>

<script>

export default {
  data () {
    return {
      // 默认面包屑路径
      menuBreadList: [{ 'id': 1, 'name': '首页' }]
    }
  },
  watch: {
    $route: {
      handler: function () {
        this.menuBreadList = this.menuBreadMap[this.$route.path].bread
      }
    }
  },
  beforeUpdate () {
    if (this.$route.path !== '/welcome' && this.menuBreadMap[this.$route.path]) {
      this.menuBreadList = this.menuBreadMap[this.$route.path].bread
    }
  },
  props: ['menuBreadMap']
}

</script>
